<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="m@markzou.com">
    <link rel="shortcut icon" href="favicon.png">
    <title>${(jshopbasicinfo.jshopname)} - 商城首页</title>

    <!-- fav icons -->
    <link rel="shortcut icon" href="${basepath}/ui/assets/img/favicon.png" />

    <link rel="stylesheet" type="text/css" href="${basepath}/ui/assets/css/inc_default_theme.css">
    <link rel="stylesheet" type="text/css" href="${basepath}/ui/assets/css/bootstrap.css">
    <link rel="stylesheet" href="${basepath}/admin/js/plugins/uploader/fileuploader.css" >
     <link rel="stylesheet" href="${basepath}/ui/js/jquery.Jcrop.min.css" >

    <script src="${basepath}/ui/assets/js/bootstrap.min.js"></script>
    <script src="${basepath}/ui/assets/js/jquery-1.9.0.min.js"></script>

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="${basepath}/ui/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respipond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="${basepath}/ui/assets/js/html5shiv.js"></script>
      <script src="${basepath}/ui/assets/js/respond.min.js"></script>
    <![endif]-->


</head>

<body>

<div class="container-fluid nopadding">

    <div class="page_content_ucpage">

        <div class="pc_head">

            <!-- 头部开始 -->
            <#include "/WEB-INF/theme/default/shop/header.ftl">
            <!--导航条-->
            <#include "/WEB-INF/theme/default/shop/mainnavigation.ftl">


        </div>
            <div class="pc_body user_center_body">
            <div class="pc_w1200">

                <div class="row">
                    <div class="col-md-3">
                        <div class="ucleft">
                            <div class="user_main">
                                <div class="userimg"><img width= "80px" hight="80px" src="${basepath}/${member.headpath}" alt=""></div>
                                <div class="user_info">
                                    <span>${member.nick}</span>
                                    注册时间：${member.createtime?string("yyyy-MM-dd")}</br>
                                    <a href="${basepath}/memberlogout.action">[注销]</a>
                                </div>

                            </div>

                            <ul class="user_nav">
                                <li>
                                    <a href="${basepath}/mcenter/gomyorderlist.action" class="un_01">
                                        <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
                                        订单管理
                                    </a>
                                </li>
                                <li>
                                    <a href="${basepath}/mcenter/goreturngoods.action" class="un_02">
                                        <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                                        售后服务
                                    </a>
                                </li>
                                <li>
                                    <a href="${basepath}/gomemberinfo.action" class="un_03 current">
                                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                                        账户资料
                                    </a>
                                </li>
                                <li>
                                    <a href="${basepath}/mcenter/goaddressmanage.action" class="un_04">
                                        <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                                        收货地址
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="col-md-9">
                        <div class="ucright">

                            <div class="om_m">
                                <div class="p_tt">
                                    账户资料
                                </div>

                                <ul class="user_infomation_main">
                                    <li>

                                        <div class="user_main2">
                                            <div class="userimg2"><img width= "120px" hight="120px" src="${basepath}/${member.headpath}" alt=""></div>
                                            <div class="user_info2">
                                                <div class="bot">
                                                <span>修改头像</span>
                                                    <button type="submit" class="btn btn-success" data-toggle="collapse" data-target="#collapseExample4" aria-expanded="false" aria-controls="collapseExample4">上传图片</button>
                                                </div>
                                            </div>

                                        </div>
                                           <div class="collapse" id="collapseExample4" style="clear: both; margin: 20px 0 0 0 !important;">
                                            <div class="alert alert-success alert-dismissible fade in" role="alert" style=" margin-bottom: 0px !important; overflow: hidden;">
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                    <div class="form-inline">
                                                        <table>
                                                            <tr>
                                                                <td><span >上传图片</span></td>
                                                                <td>
                                                                    <div id="mainpicture">
                                                                        <noscript>
                                                                            Please enable JavaScript to use file uploader.
                                                                            <!-- or put a simple form for upload here -->
                                                                        </noscript>

                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                        <!-- trigger elements -->
                                                        <div id="maintriggers"></div>
                                                        <button type="button" onclick="updateheadpic('${basepath}')" class="btn btn-default">确认修改</button>
                                                    </div>
                                            </div>
                                        </div>
                                            <input type="hidden" id="x" name="x" /></br>
                                            <input type="hidden" id="y" name="y" /></br>
                                            <input type="hidden" id="w" name="w" /></br>
                                            <input type="hidden" id="h" name="h" /></br>
                                            <input type="hidden" id="rx" name="rx" /></br>
                                            <input type="hidden" id="ry" name="ry" /></br>
                                    </li>
                                    <li>

                                        <div class="user_main2">
                                            <div class="userimg3"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span></div>
                                            <div class="user_info3">
                                                <div class="bot"><button type="submit" class="btn btn-default"data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">修改</button></div>

                                                <span>账户昵称</span>
                                                ${member.nick}
                                            </div>

                                        </div>
                                        <div class="collapse" id="collapseExample2" style="clear: both; margin: 20px 0 0 0 !important;">
                                            <div class="alert alert-success alert-dismissible fade in" role="alert" style=" margin-bottom: 0px !important; overflow: hidden;">
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <div class="form-group">
                                                    <label style="padding-bottom: 10px;">请输入新的账户昵称。</label>
                                                    <input type="text" class="form-control" id="newnikiname" placeholder="">
                                                </div>
                                                <button type="button" onclick="updateNiki('${basepath}')" class="btn btn-default">确认修改</button>
                                            </div>
                                        </div>

                                    </li>
                                    <li>

                                        <div class="user_main2">
                                            <div class="userimg3"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span></div>
                                            <div class="user_info3">
                                                <div class="bot"><button type="submit" class="btn btn-default" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample3">修改</button></div>

                                                <span>登录密码</span>
                                                互联网账号存在被盗风险，建议您定期更改密码以保护账户安全。
                                            </div>

                                        </div>
                                        <div class="collapse" id="collapseExample3" style="clear: both; margin: 20px 0 0 0 !important;">
                                            <div class="alert alert-success alert-dismissible fade in" role="alert" style=" margin-bottom: 0px !important; overflow: hidden;">
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <div class="form-group">
                                                    <label style="padding-bottom: 10px;">请输入原密码</label>
                                                    <input type="text" class="form-control" id="oldpassword" placeholder="">
                                                </div>
                                                <div class="form-group">
                                                    <label style="padding-bottom: 10px;">请输入新密码</label>
                                                    <input type="text" class="form-control" id="newpassword" placeholder="">
                                                </div>
                                                <button type="button" onclick="updatePassword('${basepath}')" class="btn btn-default">确认修改</button>
                                            </div>
                                        </div>

                                    </li>
                                </ul>
                            </div>

                        </div>
                    </div>
                </div>


            </div>
        </div>
        <#include "/WEB-INF/theme/default/shop/footer.ftl">
        </div>

    </div>

</div>

<script src="${basepath}/ui/assets/js/holder.js"></script>
<script src="${basepath}/ui/js/memberinfo.js"></script>
<script src="${basepath}/ui/assets/js/alert.js"></script>
<script src="${basepath}/ui/js/jquery.Jcrop.min.js"></script>
<script src="${basepath}/ui/assets/js/collapse.js"></script>
<script src="${basepath}/admin/js/plugins/uploader/fileuploader.js"></script>
<script type="text/javascript">
    $(function(){
        //创建主图上传控件
        createMainPictureUploader=function(){
            var uploader = new qq.FileUploader({
                element: document.getElementById('mainpicture'),
                action: '${basepath}/ajaxFileUploads.action',
                debug: true,
                minSizeLimit:1024,
                sizeLimit: 1073741824,
                allowedExtensions: ['jpeg','jpg','gif','png'],
                onComplete: function(id, fileName, responseJSON){
                    var v=responseJSON;
                    var cloudhtml="";
                    if(v.normalfilepath!=undefined){
                      var localpath="${basepath}/"+v.normalfilepath;
                      cloudhtml+= "<img width='600px' height='350px' id='imgId' src='"+localpath+"' rel='#"+fileName+"'/>";
                      cloudhtml+= "<input id='imgurl' name='mainpc' type='hidden' value='"+v.normalfilepath+"' /> ";
                    }
                    $("#maintriggers").empty();
                    $("#maintriggers").append(cloudhtml);
                     $("#imgId").Jcrop( {
                             aspectRatio : 1,
                             onChange : showCoords,
                             //onSelect : showCoords,
                             minSize :[200,200]
                         });
                }
            });
        }
        createMainPictureUploader();
        //jcrop的响应事件
        showCoords = function(obj){
            //alert("123");
             $("#x").val(obj.x);
             $("#y").val(obj.y);
             $("#w").val(obj.w);
             $("#h").val(obj.h);
             var rx = $("#imgId").width()/obj.w;
             var ry = $("#imgId").height()/obj.h;
             $("#rx").val(rx);
             $("#ry").val(ry);
        };
        updateheadpic = function(basepath){
             //选区x坐标
             var x = $("#x").val();
             //选区y坐标
             var y = $("#y").val();
             //选区宽度
             var w = $("#w").val();
             //选区高度
             var h = $("#h").val();
             //界面图宽度/选区宽度
             var rx = $("#rx").val();
             //界面图高度/选区高度
             var ry = $("#ry").val();
             //界面显示图片的宽
             var viewW = $("#imgId").width();
             //界面显示图片的高
             var viewH = $("#imgId").height();
             //图片的路径
             var imagepath = $("#imgurl").val();
             //将以上的所有参数传入后台修改方法
            $.post(basepath+"/updateHeadPic.action",{
                            "x" : x,
                            "y" : y,
                            "w" : w,
                            "h" : h,
                            "rx" : rx,
                            "ry" : ry,
                            "viewW" : viewW,
                            "viewH" : viewH,
                            "imagepath":imagepath
                            },function(data) {
                                if (data.slogin) {
                                    if (data.sucflag) {
                                    location.reload();
                                }
                            }else{
                                window.location.href = basepath+"/gologin.action";
                            }

                });
            };
    });
    </script>


</body>
</html>
